<template>
    <el-row>
        <el-col :span="12">
            <el-card class="happy1">
                <img :src="img1" class="image1">
                <div style="padding: 14px;">
                    <span>{{words1}}</span>
                    <div class="bottom">
                        <time class="time">{{ currentDate }}</time>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="happy2">
                <img :src="img2" class="image2">
                <div style="padding: 14px;">
                    <span>{{words2}}</span>
                    <div class="bottom">
                        <time class="time">{{ currentDate }}</time>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "pictureCard",
        data(){
            return{
                currentDate: new Date(),
                img1: require('../../assets/img/huiyi.gif'),
                words1: '一些事，只配当回忆。一些人，只能做过客。',
                img2: require('../../assets/img/go.gif'),
                words2: '人生至少要有两次冲动，一为奋不顾身的爱情，一为说走就走的旅行。'
            }
        }
    }
</script>

<style scoped>
    .happy2{
        position: relative;
        width: 80%;
    }
    .happy1{
        position: relative;
        left: 15%;
        width: 70%;
    }
    .time {
        font-size: 13px;
        color: #999;
    }
    .image1{
        width: 95%;
    }
    .image2 {
        width: 100%;
        display: block;
    }
</style>
